
<!--
 * @Author: your name
 * @Date: 2020-09-15 19:24:00
 * @LastEditTime: 2021-01-07 14:02:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \inventory-apie:\hjimi\人脸\html\face-recognition\src\views\Layout\components\Headnav.vue
-->
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.SlideBar {
  position: fixed;
  left: 0;
}
.isCollapseHandler {
  i {
    font-size: 20px;
    font-weight: bold;
  }
}
.SlideBar {
  height: 85vh;
  // overflow-y: auto;
  .closeMenu {color: #eee;}
  .isCollapse_tit {
    font-size: 14px;
    padding-left: 8px;
    vertical-align: text-top;
    color: #eee;
  }
}
/deep/.el-menu-vertical-demo {
  padding-top: 12px;
  height: 85vh;
  background-image: linear-gradient(#056a9a, #9198e5) !important;
}
.SlideBar::-webkit-scrollbar-track {
  background: #efefef;
  border-radius: 10px;
}
.SlideBar::-webkit-scrollbar-thumb {
  background: #eee;
  border-radius: 10px;
}
.SlideBar::-webkit-scrollbar {
  width: 5px;
}
.SlideBar::-webkit-scrollbar-corner {
  border-radius: 10px;
}
/deep/.el-menu {
  border: none;
  background: rgba(0, 0, 0, 0.2);
  border-bottom-right-radius: 6px;
  .el-submenu__title {
    i,
    span {
      color: #fff !important;
    }
    .el-submenu__icon-arrow {
      color: #fff;
    }
  }
  .isCollapseHandler {
    color: #fff;
    padding: 10px;
    cursor: pointer;
    padding-left: 22px;
    display: block;
    &:hover {
      i,span {
        color: #fff;
      }
    }
  }
  .icon-face_door {
    font-size: 30px;
  }
  .el-menu-item {
    color: rgb(191, 203, 217);
  }
  .iconfont {
    margin-right: 6px;
  }
  .el-submenu__title,.el-menu-item {
    transition: all .4s;
  }
  .el-submenu__title:hover,.el-menu-item:focus {
    background:transparent;
  }
  .el-menu-item:hover {
    background-image: linear-gradient(
      to bottom,
      #056a9a,
      #1a719a
    );
    background-color: transparent;
    color: #00ffd0;
  }
  .el-menu--inline .is-active {
    background-image: linear-gradient(
      to bottom,
      #056a9a,
      #1a719a
    );
  }
 
}
</style>
<template>
    <div class="SlideBar">
      <!-- <el-radio-group v-model="isCollapse" v-show="false"></el-radio-group> -->
      <el-menu class="el-menu-vertical-demo" :default-active="defaultActive" :router="true" :unique-opened="true"  active-text-color="#00ffd0" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <span @click="isCollapseHandler" class="isCollapseHandler"> <i :class="[isFold]" class="closeMenu"></i><span class="isCollapse_tit" v-show="isCollapse ? false : true"> {{collapseTxt}}</span ></span>

        <el-submenu v-for="(menuList, index) of menuListes" :key="index" :index="menuList.path">
          <template slot="title"><i class="iconfont icon-face_door"></i><span slot="title">{{ menuList.meta.title }}</span></template>
            <el-menu-item v-for="(menuListItem, index1) of menuList.children" :key="index1" :index="menuListItem.path">{{ menuListItem.meta.title }}</el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">支付管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu> -->
      </el-menu>
    </div>
</template>
<script>
import { asyncRoutes_list } from "@/router"
import { s_storage } from '@/utils/storage'
export default {
  name: "slideBar",
  components: {},
  data() {
    return {
      defaultActive: 'dataAnalysis',
      isCollapse: false,
      isFold: "el-icon-s-fold",
      collapseTxt: "收起",
      routeName: null,
      menuListes: [
          {
              tit: '门禁管理',
              menuListItems: [
                  {
                    item: '数据分析',
                  },
                  {
                    item: '数据分析',
                  },
                  {
                    item: '数据分析',
                  }
              ]
          }
      ]
    };
  },
  watch: {
 $route: {  
  handler(val) {
    s_storage('get', 'routeName') ? this.defaultActive = this.routeName : this.defaultActive = this.$route.name
    if(s_storage('get', 'routeName') !== this.$route.name) this.defaultActive = this.$route.name
  }
},
  },
  methods: {
    isCollapseHandler() {
      this.isCollapse
        ? ((this.isCollapse = false),
          (this.isFold = "el-icon-s-fold"),
          (this.collapseTxt = "收起"),this.$emit('isCollapseHandler','closeMenu'))
        : ((this.isCollapse = true),
          (this.isFold = "el-icon-s-unfold"),
          (this.collapseTxt = "展开"),this.$emit('isCollapseHandler','openMenu'))
    
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  created() {
     let liveAppMenu = asyncRoutes_list.filter(x => x.name === 'liveApp')[0].children
         s_storage('set', 'routeName', this.$route.name)
     let routeName = s_storage('get', 'routeName')
         this.menuListes = liveAppMenu
         this.routeName = routeName
         this.defaultActive = this.routeName !== null ? this.routeName : 'dataAnalysis'

  },
  mounted() {
    
  },
  destroyed() {
   
  }
};
</script>
